<script setup>
import { getOrderListAPI, deleteOrderAPI, refundOrderAPI } from '@/api/order'
import Search from '@/components/Search.vue'
import SearchItem from '@/components/SearchItem.vue'
import { ref } from 'vue'
import { useInitTable } from '@/composables/useCommon'
import ListHeader from '@/components/ListHeader.vue'
import ExportExcel from '@/pages/order/ExportExcel.vue'
import InfoModal from './InfoModal.vue'
import { showModal, showPrompt, toast } from '@/composables/util'
const {
  handleSelectionChange,
  multipleTableRef,
  handleMultiDelete,
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  total,
  currentPage,
  handleDelete,
  getData,
  multiSelectionIds
} = useInitTable(
  {
    searchForm: {
      tab: 'all',
      no: '',
      starttime: '',
      endtime: '',
      name: '',
      phone: ''
    },
    getList: getOrderListAPI,
    onGetListSuccess: (res) => {
      tableData.value = res.list.map((o) => {
        o.bannersLoading = false
        o.contentLoading = false
        o.skusLoading = false
        return o
      })
      total.value = res.totalCount
    },
    delete: deleteOrderAPI,
  }
)
const tabbars = [
  {
    key: 'all',
    name: '全部'
  },
  {
    key: 'nopay',
    name: '待支付'
  },
  {
    key: 'noship',
    name: '待发货'
  },
  {
    key: 'shiped',
    name: '待收货'
  },
  {
    key: 'received',
    name: '已收货'
  },
  {
    key: 'finished',
    name: '已完成'
  },
  {
    key: 'closed',
    name: '已关闭'
  },
  {
    key: 'refunding',
    name: '退款中'
  }
]

const exportExcelRef = ref(null)
const handleExportExcel = () => {
  exportExcelRef.value.open()
}
const infoModalRef = ref(null)
const info = ref(null)
const openInfoModal = (row) => {
  row.order_items = row.order_items.map(o => {
    if (o.skus_type === 1 && o.goods_skus) {
      let s = []
      for (const k in o.goods_skus.skus) {
        s.push(o.goods_skus.skus[k].value)
      }
      o.skus = s.join(',')
    }
    return o
  })
  info.value = row
  infoModalRef.value.open()
}
const handleRefund = (id, agree) => {
  (agree ? showModal('是否要同意该订单退款') : showPrompt('请输入拒绝理由'))
    .then(({ value }) => {
      let data = { agree }
      if (!agree) {
        data.disagree_reason = value
      }
      refundOrderAPI(id, data)
        .then(res => {
          getData()
          toast('操作成功')
        })

    })
}
</script>

<template>
  <div>
    <el-tabs v-model="searchForm.tab" @tab-change="getData">
      <el-tab-pane v-for="(item, index) in tabbars" :key="index" :label="item.name" :name="item.key"></el-tab-pane>
    </el-tabs>
    <el-card>
      <!-- 搜索 -->
      <Search @search="getData" @reset="resetSearchForm" :model="searchForm">
        <SearchItem label="订单编号">
          <el-input v-model="searchForm.no" placeholder="订单编号" clearable></el-input>
        </SearchItem>
        <template #show>
          <SearchItem label="收货人">
            <el-input v-model="searchForm.name" placeholder="收货人" clearable />
          </SearchItem>
          <SearchItem label="手机号">
            <el-input v-model="searchForm.phone" placeholder="手机号" clearable />
          </SearchItem>
          <SearchItem label="开始时间">
            <el-date-picker v-model="searchForm.starttime" type="date" placeholder="开始日期" style="width: 90%;"
              value-format="YYYY-MM-DD" />
          </SearchItem>
          <SearchItem label="结束时间">
            <el-date-picker v-model="searchForm.endtime" type="date" placeholder="结束日期" style="width: 90%;"
              value-format="YYYY-MM-DD" />
          </SearchItem>
        </template>
      </Search>
      <!-- 新增 刷新 -->
      <ListHeader layout="refresh,download" @download="handleExportExcel" @refresh="getData">
        <el-button type="danger" size="small" @click="handleMultiDelete">批量删除</el-button>
      </ListHeader>
      <!-- 表格区域 -->
      <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" class="mt-3" v-loading="loading"
        :data="tableData" border stripe style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="商品" width="300">
          <template #default="{ row }">
            <div class="flex text-sm">
              <div class="flex-1">
                <p>订单号：</p>
                <small>{{ row.no }}</small>
              </div>
              <div>
                <p>下单时间：</p>
                <small>{{ row.create_time }}</small>
              </div>
            </div>
            <div class="flex" v-for="(item, index) in row.order_items" :key="index">
              <el-image :src="item.goods_item ? item.goods_item.cover : ''" fit="cover" :lazy="true"
                style="width: 30px; height: 30px;"></el-image>
              <p class="text-blue-500 ml-2">
                {{ item.goods_item ? item.goods_item.title : '商品已被删除' }}
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="实际付款" prop="total_price" width="120" align="center"></el-table-column>
        <el-table-column label="买家" align="center" width="120">
          <template #default="{ row }">
            <p>{{ row.user.nickname || row.user.username }}</p>
            <small>(用户ID：{{ row.user.id }})</small>
          </template>
        </el-table-column>
        <el-table-column label="交易状态" align="center" width="170">
          <template #default="{ row }">
            <div>
              付款状态:
              <el-tag v-if="row.payment_method === 'wechat'" type="success" size="small">微信支付</el-tag>
              <el-tag v-else-if="row.payment_method === 'alipay'" type="primary" size="small">支付宝支付</el-tag>
              <el-tag v-else type="info" size="small">未支付</el-tag>
            </div>
            <div>
              发货状态:
              <el-tag :type="row.ship_data ? 'success' : 'info'" size="small">{{ row.ship_data ? '已发货' : '未发货'
                }}</el-tag>
            </div>
            <div>
              收货状态:
              <el-tag :type="row.ship_status === 'received' ? 'success' : 'info'" size="small">
                {{
                  row.ship_status === 'received' ? '已收货' : '未收货'
                }}
              </el-tag>
            </div>
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button class="px-1" type="primary" size="small" text @click="openInfoModal(row)">订单详情</el-button>
            <el-button v-if="searchForm.tab === 'noship'" class="px-1" type="primary" size="small" text>订单发货</el-button>
            <el-button v-if="searchForm.tab === 'refunding'" class="px-1" type="primary" size="small" text
              @click="handleRefund(row.id, 1)">同意退款</el-button>
            <el-button v-if="searchForm.tab === 'refunding'" class="px-1" type="primary" size="small" text
              @click="handleRefund(row.id, 0)">拒绝退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="flex justify-center mt-auto-3" background layout="prev, pager, next" :total="total"
        :current-page="currentPage" @current-change="getData" />
    </el-card>
    <ExportExcel :tabs="tabbars" ref="exportExcelRef"></ExportExcel>
    <InfoModal ref="infoModalRef" :info="info"></InfoModal>
  </div>
</template>
